<template>
  <div class="studentDialog">
    <div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" class="elinput" />
        </el-form-item>

        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile" class="elinput" />
        </el-form-item>

        <el-form-item label="部门" prop="depname">
          <el-select v-model="ruleForm.depname" class="characters">
            <el-option
              v-for="item in depnameoption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="班级" prop="classname">
          <el-select
            v-model="ruleForm.classname"
            class="characters"
            placeholder="请选择班级"
          >
            <el-option
              v-for="item in classoption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm.remarks" type="textarea" />
        </el-form-item>

        <el-form-item v-show="isText===true" label="账号" prop="username">
          <el-input v-model="ruleForm.username" class="elinput" />
        </el-form-item>

        <el-form-item v-show="isText===true" label="密码" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            show-password
            class="elinput"
          />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button @click="colf">取消</el-button>
      <el-button type="primary" @click="studentAdmin()">{{
        isText === true ? '添加' : '修改'
      }}</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref,watchEffect } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {departmentList,classesList,studentAdd} from '../../api/student';
import { ElMessage } from 'element-plus';

const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  id: 0,
  name: '',
  mobile: '',
  depname: '',
  classname: '',
  remarks: '',
  username: '',
  pass: '',
  classid:''
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  depname: [{ required: true, message: '请选择部门', trigger: 'blur' }],
  classname: [{ required: true, message: '请选择班级', trigger: 'blur' }],
  remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});

// 部门列表
const depnameoption = ref([]as any[]);
const depnameList = async () => {
  let query = {
    page: 1,
    psize: 5,
  };
  const res = await departmentList(query);
  console.log('部门',res);
  depnameoption.value = res.data.list;
};
depnameList();

// 班级列表
const classoption = ref([] as any[]);
const classList = async () => {
  let query = {
    page: 1,
    psize: 5,
  };
  const res = await classesList(query);
  console.log('班级',res);
  classoption.value = res.data.list;
};
classList();

const props = defineProps(['isText','idsAamin']);
const emit = defineEmits(['clickChild', 'click']);
// 取消按钮
const colf = () => {
  emit('clickChild', false);
};
// 添加修改
const studentAdmin = async () => {
  if (props.isText === true) {
  console.log(ruleForm);

    const res:any = await studentAdd(ruleForm);
    console.log(res);
    if (res.errCode === 10000) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      });
      emit('click',false)
    }
  }else{
    ruleForm.id=props.idsAamin.id
    console.log(ruleForm.id);
    const res:any = await studentAdd(ruleForm);
    console.log(res);
    if(res.errCode===10000){
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
      emit('click',false)
    }
  }
};
// 回显
watchEffect(()=>{
  if(props.isText){
    Object.assign(ruleForm,{//Object.assign ()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。
      id: 0,
      name: '',
      mobile: '',
      depname: '',
      classname: '',
      remarks: '',
      username: '',
      pass: '',
    })
  }else{
    Object.assign(ruleForm, props.idsAamin);
  }
  console.log(999, props.idsAamin);
})
</script>

<style lang="less" scoped>
:deep(.elinput) {
  width: 320px;
}
:deep(.el-textarea__inner) {
  width: 320px;
}
</style>
